<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src=" https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js" type="text/javascript"
			charset="utf-8"></script>
		<style type="text/css">
			#nav{
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			
		</div>
		<script type="text/javascript">
			var charts = echarts.init(document.getElementById('nav'));
			var option ={
				grid:{//设置网线
					show:true,
					borderWidth:5,//设置边框粗细
					borderColor:'red'//设置边框颜色
				},
				dataZoom:[
					{
						type:'slider'
					}
				],
				toolbox:{//工具栏
					feature:{
						dataZoom:{},//区域缩放
					}
				},
				xAxis:{
					type:'category',
					data:['星期一','星期二','星期三','星期四','星期五','星期六','星期天',],
					position:'top'//改变x轴的位置  只能上下
				},
				yAxis:{
					type:'value',
					position:'right'//改变y轴的位置 只能左右
				},
				tooltip:{
					trigger:'item'
				},
				series:[
					{
						name:'英文',
						type:'bar',
						data:[34,25,86,84,25,75,90]
					},
					{
						name:'英文',
						type:'bar',
						data:[56,75,96,84,95,35,90]
					}
				]
			}
			charts.setOption(option);
		</script>
	</body>
</html>
